<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="core.CSS 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。"/>
	<link rel="stylesheet" href="./css/core.css" />
	<title>core.CSS - 中文网页重设与排版</title>
	<style>
	   body{margin:0 20px;}
    </style>
    <!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<h1>From表单</h1>
<section>					

					<h3>Form validation example</h3>
					<div class="box box-info">All fields are required</div>
					
					<form id="sampleform" method="post" action="#">

						<fieldset>
							<legend>JQuery Form Validation</legend>
							<div class="upload">
    <button type="button" class="btn">上传文件</button>
    <input type="file"/>
</div>
							<p>
								<label class="required" for="firstname">First name:</label><br>
								<input type="text" id="firstname" class="half" value="" name="firstname">
							</p>

							<p>
								<label class="required" for="lastname">Last name:</label><br>
								<input type="text" id="lastname" class="half" value="" name="lastname">
							</p>

							<p>
								<label class="required" for="username">Username:</label><br>
								<input type="text" id="username" class="half" value="" name="username">
								<small>e.g. ui.templates</small>
							</p>
							
							<p>
								<label class="required" for="password">Password:</label><br>
								<input type="password" id="password" class="half" value="" name="password">
							</p>

							<p>
								<label class="required" for="password_confirm">Confirm password:</label><br>
								<input type="password" id="password_confirm" class="half" value="" name="password_confirm">
							</p>

							<p>
								<label class="required" for="email">Email address:</label><br>
								<input type="text" id="email" class="half" value="" name="email">
							</p>
							
							<p>
								<label class="required">Date format:</label><br>
								<input type="radio" id="dateformat1" class="" value="dmy" name="dateformat">
								<label class="choice" for="dateformat1">dd/mm/yyyy</label>
								<input type="radio" id="dateformat2" class="" value="mdy" name="dateformat">
								<label class="choice" for="dateformat2">mm/dd/yyyy</label>
							</p>
							
							<p>
								<input type="checkbox" id="terms" class="" value="1" name="terms">
								<label class="choice" for="terms">I have read and accept the Terms of Use.</label>
							</p>
							
							<p class="box"><input type="submit" class="btn btn-green big" value="Validate"> or <input type="reset" class="btn" value="Reset"></p>

						</fieldset>

					</form>

					<h3>Form elements</h3>
					
					<h5>Step 1/6</h5>
					<div id="progress1" class="progress full progress-green" value="1"><span style="width: 17%; display: block;"><b style="display: inline;">17%</b></span></div>
					
					<form id="sampleform2" method="post" action="#" onsubmit="return false;">

						<fieldset>
							<legend>Error message</legend>
							<div class="box box-error">Invalid credit card info</div>
							<div class="box box-error-msg">
								<ol>
									<li>Credit card number entered is invalid</li>
									<li>Credit card verification number must be a valid number</li>
								</ol>
							</div>
						</fieldset>
						
						<fieldset>
							<legend>Text fields</legend>
								<p>
									<label for="input2">Big title:</label><br>
									<input type="text" id="input2" class="half title" value="" name="input2">
									<small>class="half title"</small>
								</p>
								<p>
									<label for="input1">Full textbox:</label><br>
									<input type="text" id="input1" class="full" value="" name="input1">
									<small>class="full"</small>
								</p>
						</fieldset>
						
						<fieldset>
							<legend>Text area</legend>
							<p>
								<label for="area1">Small textarea:</label><br>
								<textarea id="area1" class="small" name="area1"></textarea>
								<small>class="small"</small>
							</p>
							<p>
								<label for="area1">Medium textarea:</label><br>
								<textarea id="area2" class="medium half" name="area2"></textarea>
								<small>class="medium half"</small>
							</p>
							<p>
								<label for="area1">Large textarea:</label><br>
								<textarea id="area3" class="large full" name="area3"></textarea>
								<small>class="large full"</small>
							</p>
						</fieldset>
						
						<fieldset>
							<legend>Selections</legend>
							<div class="clearfix">
								<div class="column width3 first">									
									<p>
										<label>Radio buttons:</label><br>
										<input type="radio" id="rb1" class="" value="" name="rb">
										<label class="choice" for="rb1">Lorem ipsum dolor sit amet</label><br>
										<input type="radio" id="rb2" class="" value="" name="rb">
										<label class="choice" for="rb2">Lorem ipsum dolor sit amet</label>
									</p>
									<p>
										<label for="select1">Single selection:</label><br>
										<select id="select1" class="half" name="select1">
											<option value="1">Lorem</option>
											<option value="2">Ipsum</option>
											<option value="3">Dolor</option>
											<option value="4">Sit</option>
											<option value="5">Amet</option>
										</select>
									</p>
								</div>
								<div class="column width3">
									<p>
										<label>Check boxes:</label><br>
										<input type="checkbox" id="cb1" class="" value="" name="cb">
										<label class="choice" for="cb1">Lorem ipsum dolor sit amet</label><br>
										<input type="checkbox" id="cb2" class="" value="" name="cb">
										<label class="choice" for="cb2">Lorem ipsum dolor sit amet</label>
									</p>
									<p>
										<label for="select2">Multiple selection:</label><br>
										<select id="select2" class="half" multiple="multiple" size="6" name="select2">
											<optgroup label="Set 1">
												<option value="1" selected="">Lorem</option>
												<option value="2">Ipsum</option>
											</optgroup>
											<optgroup label="Set 2">
												<option value="3">Dolor</option>
												<option value="4">Sit</option>
												<option value="5">Amet</option>
											</optgroup>
										</select>
									</p>
								</div>
							</div>
						</fieldset>
						
						<fieldset>
							<legend>Buttons</legend>
							<label>Some combinations</label>
							<input type="button"  value="Simple gray" /><input type="submit" class="btn btn-green big" value="Big green"><input type="submit" class="btn btn-warning" value="Standard red"><span class="btn">确定</span><div class="btn btn-success">确定</div>
						</fieldset>
						
					</form>
				
				</section>
</body>
</html>
